<style lang="scss" scoped>
$scale: 1.2;
.header {
  display: flex;
  justify-content: space-between;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 16px;
  height: 45px;
  .header_left {
    span {
      font-size: 18px;
      color: #1f88fe;
    }
  }
  .header_right {
    span {
      font-size: 18px;
      color: #1f88fe;
    }
  }
}

.list {
  .head {
    font-size: 20px;
    line-height: 30px;
    height: 30px;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #1f88fe;
  }
  .period {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 10px;
    background-color: #f3f6f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      display: inline-table;
      margin-left: 8px;
      font-size: 12px * $scale;
      color: #666666;
      width: 75%;
      text-align: left;
      img {
        width: 10px;
        height: 10px;
        display: table-cell;
      }
      span {
        display: table-cell;
        width: 90%;
        text-align: left;
      }
    }
    .status {
      margin-right: 10px;
      span {
        font-size: 10px * $scale;
        color: #999999;
      }
      img {
        margin-left: 8px;
        width: 12px;
        height: 12px;
      }
      .ing {
        font-size: 10px * $scale;
        color: #1f88fe;
      }
    }
  }
}
</style>

<template>
  <div>
    <!-- 页面头 -->
    <header class="header">
      <div class="header_left">
        <span @click="goBack">
          <i class="mintui mintui-back"></i>返回</span>
      </div>
      <div class="header_right">
        <span @click="goBack">取消</span>
      </div>
    </header>
    <div class="list">
      <div class="head">
        章节目录
      </div>
      <ul>
        <li class="period" v-for="(citem,cindex) in lessonList" :key="cindex" @click="play(citem)">
          <div class="title">
            <img src="@/assets/images/课程_学习_章节_小.png" />
            <span v-if="citem.stage=='CONTINUE'" :style="{color:CONTINUE}">{{citem.title}}</span>
            <span v-else-if="citem.stage=='FINISHED'" :style="{color:FINISHED}">{{citem.title}}</span>
            <span v-else>{{citem.title}}</span>
          </div>
          <div class="status">
            <span v-if="citem.stage=='CONTINUE'" :style="{color:CONTINUE}">{{citem.stagetxt}}</span>
            <span v-else-if="citem.stage=='FINISHED'" :style="{color:FINISHED}">{{citem.stagetxt}}</span>
            <span v-else>{{citem.stagetxt}}</span>
            <img v-if="citem.stage=='CONTINUE'" class="check" :style="{color:CONTINUE}" :src="citem.stage | getIcon">
            <img v-else-if="citem.stage=='FINISHED'" class="check" :style="{color:FINISHED}" :src="citem.stage | getIcon">
            <img v-else class="check" :src="citem.stage | getIcon">
        </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import api from '@/api/index'
import finished from '@/assets/images/课程_已完成.png'
import continueAble from '@/assets/images/课程_暂停.png'
import disAble from '@/assets/images/课程_不可播放.png'
import playAble from '@/assets/images/课程_播放.png'
export default {
  data () {
    return {
      lessonList: [],
      FINISHED: '#1f88fe',
      CONTINUE: 'blue'
    }
  },
  created () {
    this.initPage()
  },
  methods: {
    initPage () {
      this.courseid = this.$route.query.courseid
      this.getLessonList()
    },
    getLessonList () {
      api.getLessonList({
        params: {
          courseid: this.courseid
        }
      }).then(resp => {
        this.lessonList = resp.result
      })
    },
    goBack () {
      this.$router.push({
        path: '/course/lesson',
        query: {
          courseid: this.$route.query.courseid,
          lessonid: this.$route.query.lessonid
        }
      })
    },
    // 播放
    play (citem) {
      console.log(citem)
      if (citem.stage === 'FREE' || citem.stage === 'FINISHED' || citem.stage === 'CONTINUE' || citem.stage === 'EXAMINATION') {
        this.$router.push({
          path: '/course/lesson',
          query: {
            lessonid: citem.lessonid,
            courseid: this.courseid
          }
        })
      } else if (citem.stage === 'DISABLED') {
        return null
      }
    }
  },
  filters: {
    getIcon: function (value) {
      if (value === 'FREE') {
        return playAble
      } else if (value === 'FINISHED') {
        return finished
      } else if (value === 'CONTINUE' || value === 'EXAMINATION') {
        return continueAble
      } else if (value === 'DISABLED') {
        return disAble
      }
    }
  }
}
</script>
